<template>
  <div class="main">
    <div class="main-header">
      <div class="main-header-title">美行无忧</div>
      <div class="main-header-right-group">
        <span class="main-header-welcome">欢迎回来，{{userInfo.realName}}</span>
        <span class="main-header-time">{{now | datetimeFormat}}</span>
        <span class="main-header-btn-group">
          <a href="javascript:void(0)" @click="onToggleTerminal" title="Ctrl+R"><i class="fa fa-desktop"></i>黑屏</a>
          <a href="javascript:void(0)" @click="onToggleMonitor" title="Ctrl+M"><i class="fa fa-laptop"></i>监控</a>
          <a href="javascript:void(0)" @click="updatePassword"><i class="fa fa-cog"></i>修改密码</a>
          <!--a href="javascript:void(0)">
            <div style="display: inline-block;height: 13px;position: relative">
              <el-badge :value="msgCount">
                <i class="fa fa-bell"></i>
              </el-badge>
            </div>
            消息</a-->
          <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出</a>
        </span>
      </div>
    </div>
    <div class="main-container">
      <l-page :width.sync="menuWidth">
        <template slot="aside">
          <el-menu style="height: 100%;overflow: auto" @select="handleSelect" :default-active="activeItem.key" :collapse="isCollapse">
            <li @click="onToggleMenu" role="menuitem" tabindex="-1" class="el-menu-item" style="padding-left: 20px;">
              <i class="fa" :class="isCollapse?'fa-expand':'fa-compress'"></i>
              <span>{{isCollapse?'展开':'收起'}}菜单</span>
            </li>
            <el-submenu :index="item.name" v-for="item in menu" :key="item.name">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item v-for="node in item.nodes" :index="node.key" :key="node.key">
                <i :class="node.icon"></i>
                <span slot="title">{{node.name}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </template>
        <template slot="content">
          <el-tabs class="tab-pane" v-model="activeTab" type="card" closable @tab-remove="removeTab">
            <el-tab-pane
              :key="item.pid"
              v-for="item in list"
              :label="item.name"
              :name="item.pid"
            >
              <component :is="item.appKey" :app="item" @changeApp="changeApp(item, $event)"/>
            </el-tab-pane>
          </el-tabs>
        </template>
      </l-page>
    </div>
    <order-monitor v-if="showMonitor" @close="showMonitor = false"/>
    <order-terminal :visible.sync="showTerminal"/>
    <component :is="dialog.tag" @close="dialog.tag = ''"/>
  </div>
</template>

<script>
import user from '@mixins/user'
import menu from '@mixins/menu'
import Tab from '@/classes/Tab'
import tabManager from '@/eventBus/tabManager'
import OrderMonitor from './comps/OrderMonitor'
import OrderTerminal from './comps/OrderTerminal'
import UpdatePassword from '../App/src/Personal/UpdatePassword'

import Keyboard from '@/constants/Keyboard'
import {addCtrlKeyEvent, removeCtrlKeyEvent} from '@/utils/events/keyboardListener'

let interval = null

export default {
  components: {
    OrderTerminal,
    OrderMonitor,
    UpdatePassword},
  name: 'Main',
  mixins: [user, menu],
  data () {
    return {
      menuWidth: 190,
      isCollapse: false,
      list: tabManager.list,
      now: new Date(),
      msgCount: 2,
      showMonitor: false,
      showTerminal: false,
      dialog: {
        tag: ''
      }
    }
  },
  computed: {
    activeTab: {
      get () {
        const list = this.list.filter(i => i.status === 'active')
        if (list.length > 0) {
          return list[0].pid
        } else {
          return ''
        }
      },
      set (pid) {
        tabManager.topTabByPid(pid)
      }
    },
    activeItem () {
      const list = this.list.filter(function (i) {
        return i.status === 'active'
      })
      if (list.length > 0) {
        return list[0]
      } else {
        return {
          key: '-1'
        }
      }
    }
  },
  created () {
    // C+M键快捷打开
    addCtrlKeyEvent(Keyboard.M, this.onToggleMonitor)
    addCtrlKeyEvent(Keyboard.R, this.onToggleTerminal)
    this.$service.personal.getPersonalInfoSilence().then(res => {
      this.setUserInfo(res.data)
    }).catch(e => {
    })
    tabManager.addTab(new Tab({key: 'airOrderManage.orderIssueList'}))
    interval = setInterval(this.updateTime, 1000)
    this.$dateUtils.getNow().then(now => {
      this.now = now
    })
  },
  beforeDestroy () {
    removeCtrlKeyEvent(Keyboard.M, this.onToggleMonitor)
    removeCtrlKeyEvent(Keyboard.R, this.onToggleTerminal)
    clearInterval(interval)
    this.onCloseAll()
  },
  methods: {
    onCloseAll () {
      tabManager.clearAll()
    },
    removeTab (pid) {
      tabManager.removeTabByPid(pid)
    },
    handleSelect (key) {
      if (key !== 'personal.updatePassword') {
        tabManager.addTab(new Tab({key}))
      } else {
        this.updatePassword()
      }
    },
    updateTime () {
      this.$dateUtils.getNow().then(now => {
        this.now = now
      })
    },
    logout () {
      this.$service.login.logout().then(() => {
        this.$router.push('/login')
      })
    },
    changeApp (oTab, nTab) {
      tabManager.changeTab(oTab, nTab)
    },
    onToggleMenu () {
      this.isCollapse = !this.isCollapse
      this.menuWidth = this.isCollapse ? 65 : 190
    },
    onToggleMonitor () {
      this.showMonitor = !this.showMonitor
    },
    onToggleTerminal () {
      this.showTerminal = !this.showTerminal
    },
    updatePassword () {
      this.dialog.tag = 'UpdatePassword'
    }
  }
}
</script>

<style>

</style>
